<template>
  <div style="height: 100%">
  </div>
</template>

<script>
import Format from '@/utils/format'

export default {
  // type  AB  AO  BO
  props: ['type'],
  data() {
    return {
      textColor: '#00e6ff',
      charts: '',
      yList: [],
      timerList: [],
      seriesList: [{
        itemStyle: {
          normal: {
            lineStyle: {
              width: 63//设置线条粗细
            }
          }
        }
      }],
      monitorName: '合成方向相对位移',
    }
  },
  computed: {
    options() {
      var _this = this

      function formatter(params) {
        var contentArr = []
        for (var i = 0; i < params.length; i++) {
          var data = params[i]
          if (i === 0) {
            contentArr.push('孔深：' + data.name + 'm')
          }
          let y = String(data.value).indexOf(".") + 1;//获取小数点的位置
          let count = String(data.value).length - y;//获取小数点后的个数
          if (_this.type == 'X' || _this.type == 'Y' || _this.type == 'az' || _this.type == 'in') {
            if (data.value !== undefined) {
              if (count < 3) {
                contentArr.push(data.marker + data.seriesName + '：' + data.value + '°')
              } else {
                contentArr.push(data.marker + data.seriesName + '：' + data.value.toFixed(3) + '°')
              }
            }
          } else {
            contentArr.push(data.marker + data.seriesName + '：' + data.value.toFixed(3) + 'mm')
          }
        }
        return contentArr.join('<br/>')
      }

      return {
        title: {
          text: `${this.monitorName}`,
          x: 'left',
          textStyle: {
            color: this.textColor
          }
        },
        animationDuration: 2000, // 动画时长 可以接受 回调函数
        //提示框组件
        tooltip: {
          // 设置为坐标轴触发
          trigger: 'axis',
          // 提示框悬浮内容格式器
          formatter: formatter
        },
        // 图例组件
        legend: {
          data: this.timerList,
          y: 'top',
          x: 'right',
          padding: [10, 2, 0, 0],
          // 设置为可滚动的图例
          type: 'scroll',
          orient: 'vertical',
          textStyle: {
            color: this.textColor
          }

        },
        // 直角坐标系内绘图网格
        grid: {
          left: 30,
          right: 160,
          bottom: 20,
          // 区域是否包含坐标轴的刻度标签
          containLabel: false
        },
        // grid x轴
        yAxis: [{
          splitLine: {
            show: true
          },
          // 坐标轴名称
          name: '孔深(m)',
          // 类型为类目轴适用于离散的类目数据。为该类型时类目数据可自动从 series.data 或 dataset.source 中取，或者可通过 xAxis.data 设置类目数据。
          type: 'category',
          boundaryGap: false,
          // 数据
          data: this.yList,
          nameTextStyle: {
            color: this.textColor
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: this.textColor
            }
          }
        }],
        xAxis: {
          max: function (value) {
            if (value.max < 30) {
              return 30
            }
            return Math.ceil(value.max)// 向上取整
          },
          min: function (value) {
            if (value.min > -30) {
              return -30
            }
            return Math.ceil(value.min)// 向上取整
          },
          type: 'value',
          name: '位移/mm',
          nameTextStyle: {
            color: this.textColor
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: this.textColor
            },
          },
          axisLine: {
            lineStyle: {
              color: this.textColor
            }
          }
        },
        series: this.seriesList
      }
    }
  },

  methods: {
    updateEchart(list, holeDepth = 0) {
      this.charts.clear()
      this.charts.resize()
      const keyMap = {
        AB: '',
        AO: 'relativeA0',
        BO: 'relativeB0',
        X: 'xAngle',
        Y: 'yAngle',
        az: 'az',
        in: 'in'
      }
      // 处理Y轴深度
      let yList = list[0]?.sbwyDetails?.map(x => x.depth) || []
      this.yList = [holeDepth, ...yList]
      let timerList = []
      let seriesList = []
      list.map((x) => {
        let timer = Format(new Date(x.createTime))
        timerList.push(timer)
        let item = {
          name: timer,
          yAxisIndex: 0, //双y轴设置使用哪个y轴的值
          type: 'line',
          smooth: true,
          label: this.type,
          data: [0, ...x.sbwyDetails.map(w => w.relativeSynthesis)],
        }
        seriesList.push(item)
      })
      this.timerList = timerList
      this.seriesList = seriesList
      this.charts.setOption(this.options, true)
    },
  },
  created() {
  },
  mounted() {
    const Echarts = require('echarts')
    this.charts = Echarts.init(this.$el, null, {locale: 'ZH'})
    this.charts.on('click', params => {
      // 关闭tip提示
      this.charts.dispatchAction({type: 'hideTip'})
      this.$emit('showDialog', {params, type: this.type})
    })
    this.charts.on('mouseout', params => {
      // 关闭tip提示
      this.charts.dispatchAction({type: 'hideTip'})
    })
    window.addEventListener('resize', this.echartResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.echartResize)
  }
}
</script>
